<template>
  <view class="login-container">
    <view class="login-box">
      <view class="header">
        <view class="logo-wrapper">
          <image src="/static/logo.png" mode="aspectFit" class="logo"></image>
        </view>
        <text class="title">江西智慧农业</text>
        <text class="subtitle">智慧农业 · 智享未来</text>
      </view>
      
      <view class="form-box">
        <view class="input-group">
          <view class="input-item">
            <text class="iconfont icon-user"></text>
            <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
          </view>
          
          <view class="input-item">
            <text class="iconfont icon-password"></text>
            <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
          </view>
        </view>

        <button @click="handleLogin" class="login-btn" hover-class="btn-hover">
          <text class="btn-text">登 录</text>
          <text class="iconfont icon-arrow-right"></text>
        </button>
        
        <view class="footer-links" v-if="register">
          <text @click="handleUserRegister" class="register-link">注册账号</text>
        </view>
      </view>
    </view>
    
    <!-- 添加装饰性背景元素 -->
    <view class="decoration-circle circle-1"></view>
    <view class="decoration-circle circle-2"></view>
    <view class="decoration-circle circle-3"></view>
  </view>
</template>

<script>
  import { getCodeImg } from '@/api/login'

  export default {
    data() {
      return {
        captchaEnabled: true,
        register: false,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "admin",
          password: "admin123",
          code: "",
          uuid: ''
        }
      }
    },
    created() {
      this.getCode()
    },
    methods: {
      handleUserRegister() {
        this.$tab.redirectTo(`/pages/register`)
      },
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.loginForm.uuid = res.uuid
            this.loginForm.code = "" // 设置空验证码
          }
        })
      },
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      loginSuccess(result) {
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      }
    }
  }
</script>

<style lang="scss">
page {
  background: linear-gradient(135deg, #0052D4, #4364F7, #6FB1FC);
  height: 100vh;
  overflow: hidden;
}

.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  .login-box {
    width: 85%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .header {
      text-align: center;
      margin-bottom: 40px;
      
      .logo-wrapper {
        width: 120px;
        height: 120px;
        margin: 0 auto 20px;
        background: rgba(255, 255, 255, 1);
        border-radius: 24px;
        padding: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        
        .logo {
          width: 90px;
          height: 90px;
          object-fit: contain;
        }
      }
      
      .title {
        font-size: 28px;
        color: #333;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
        background: linear-gradient(135deg, #0052D4, #4364F7);
        -webkit-background-clip: text;
        color: transparent;
      }
      
      .subtitle {
        font-size: 16px;
        color: #666;
        display: block;
        letter-spacing: 1px;
      }
    }
    
    .form-box {
      .input-group {
        margin-bottom: 30px;
      }
      
      .input-item {
        background: rgba(245, 247, 250, 0.8);
        border-radius: 16px;
        height: 55px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
        
        &:focus-within {
          background: #fff;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          border-color: #4364F7;
          transform: translateY(-1px);
        }
        
        .iconfont {
          font-size: 24px;
          color: #4364F7;
          margin-right: 15px;
        }
        
        .input {
          flex: 1;
          font-size: 16px;
          color: #333;
          
          &::placeholder {
            color: #999;
          }
        }
      }
      
      .login-btn {
        width: 100%;
        height: 55px;
        background: linear-gradient(135deg, #0052D4, #4364F7);
        border-radius: 16px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        border: none;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
          opacity: 0;
          transition: opacity 0.3s;
        }
        
        .btn-text {
          margin-right: 10px;
        }
        
        .icon-arrow-right {
          font-size: 20px;
          transition: transform 0.3s;
        }
        
        &:active {
          transform: scale(0.98);
          
          &::before {
            opacity: 1;
          }
          
          .icon-arrow-right {
            transform: translateX(5px);
          }
        }
      }
      
      .footer-links {
        margin-top: 25px;
        text-align: center;
        
        .register-link {
          color: #4364F7;
          font-size: 15px;
          text-decoration: none;
          position: relative;
          padding-bottom: 2px;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: #4364F7;
            transform: scaleX(0);
            transition: transform 0.3s;
          }
          
          &:active::after {
            transform: scaleX(1);
          }
        }
      }
    }
  }
  
  // 装饰性背景圆
  .decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(5px);
    
    &.circle-1 {
      width: 200px;
      height: 200px;
      top: -100px;
      right: -50px;
    }
    
    &.circle-2 {
      width: 150px;
      height: 150px;
      bottom: -50px;
      left: -75px;
    }
    
    &.circle-3 {
      width: 100px;
      height: 100px;
      top: 40%;
      right: -25px;
    }
  }
}
</style>
